<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>过滤器</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/dayjs.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>显示格式化后的时间</h2>
			<!-- 计算属性实现 -->
			<h3>现在是：{{fmtTime}}</h3>
			<!-- methods实现 -->
			<h3>现在是：{{getFmtTime()}}</h3>
			<!-- 过滤器实现 -->
			<!--实现的步骤：
				1.读取time，把time作为参数调给timeFormater
				2.vue拿到timeFormater的返回值
				3.最后替换掉整个{{time | timeFormater}}
				4.注意：需要增加一个过滤器fliters-->
			<h3>现在是：{{time | timeFormater}}</h3>
			<!-- 过滤器实现（传参） -->
			<!--TimeFormater会收到两个参数，一个time，一个时间格式-->
			<!--工作流程：
				1.time先传递给timeFormater进行工作
				2.工作之后的结果result在传递给mySlice-->
			<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
			<h3 :x="msg | mySlice">Gui</h3>
		</div>

		<!--验证了局部过滤器-->
		<div id="root2">
			<h2>{{msg | mySlice}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})
		
		new Vue({
			el:'#root',
			data:{
				time:1621561377603, //时间戳
				msg:'你好呀！GUI'
			},
			computed: {
				//有time就转换time的，没有的话就转换当前时间的
				fmtTime(){
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			methods: {
				getFmtTime(){
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			//局部过滤器，只有该Vue实例可以使用
			filters:{
				//如果传入的str有值，就用传入的。没有的话就用默认的str值
				timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
					// console.log('@',value)
					return dayjs(value).format(str)
				},
				//mySlice(value){
				//	return value.slice(0,4)
				//}
			}
		})

		new Vue({
			el:'#root2',
			data:{
				msg:'hello!'
			}
		})
	</script>
</html>